<template>
  <div id="radio">
    <div class="type-title">
      <span style="color: #e10808">{{ index + 1 }}. {{ item.type }}</span>
      ({{ item.score || 0 }} 分)
    </div>
    <div class="title">{{ item.title }}</div>

    <div v-for="(op, i) in item.options" :key="i">
      <el-checkbox
        :disabled="isdetail"
        v-model="op.myanswer"
        class="contentItem"
        @change="(checked) => myanswerChange(checked, i)"
      >
        <div class="opt-item">{{ A(i) }}.{{ op.title }}</div>
      </el-checkbox>
    </div>

    <div class="answer" v-if="isdetail">
      <div class="info">
        <i
          class="el-icon-success"
          v-if="item.score == item.myScore"
          style="font-size: 30px; color: #1ec88b; float: left"
        ></i>
        <i
          class="el-icon-circle-close"
          v-else
          style="font-size: 30px; color: #ff4c50; float: left"
        ></i>

        <p>
          正确答案：
          <span style="color: #266fff">{{ getAnswers(item.options) }}</span>
        </p>
        <p>
          我的答案：
          <span style="color: #266fff">{{ getMyAnswers(item.options) }}</span>
        </p>
        <p>
          我的得分：
          <span style="color: #266fff">{{ item.myScore }}</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "radio",
  props: {
    item: {
      type: Object,
    },
    index: {
      type: Number,
    },
    isdetail: {
      type: Boolean,
    },
  },
  data() {
    return {
      myAnswers: this.item.myAnswers ? JSON.parse(this.item.myAnswers) : [],
    };
  },
  mounted() {},
  methods: {
    getMyAnswers(options) {
      var _myAnswers = "";
      if (options) {
        var _opts = options;
        _opts.map((o, idx) => {
          if (o.myanswer) {
            _myAnswers += this.A(idx);
          }
        });
      }
      return _myAnswers;
    },
    getAnswers(options) {
      var _answers = "";
      if (options) {
        var _opts = options;
        _opts.map((o, idx) => {
          if (o.isanswer) {
            _answers += this.A(idx);
          }
        });
      }
      return _answers;
    },
    A(v) {
      v = parseInt(v);
      var alphabet = String.fromCharCode(64 + ++v);
      return alphabet;
    },
    // 选择答案切换
    myanswerChange(value, idx) {
      // console.log('value=====>',myanswer)
      this.item.options[idx].myanswer = value;

      var _answers = [];

      this.item.options.forEach((e, i) => {
        if (e.myanswer) {
          _answers.push(i);
        }
      });

      if (_answers && _answers.length > 0) {
        this.item.myAnswers = JSON.stringify(_answers);
        this.item.isAnswers = 1;
      } else {
        this.item.myAnswers = undefined;
        this.item.isAnswers = 0;
      }
      console.log("isAnswers", this.item);
      this.$emit("changeres", this.item, idx);
    },
    choose(v) {
      var resArr = this.myAnswers;
      var idx = resArr.findIndex((el) => {
        return el == v;
      });
      if (idx != -1) {
        resArr.splice(idx, 1);
      } else {
        resArr.push(v);
      }
      console.log("resArr", resArr);
      this.myAnswers = resArr;
      // console.log("vvvvv=>", v, this.item);
      // this.$set('chooseAn',this.item,v.type)
      this.item.myAnswers = resArr;
      this.$emit("changeres", this.item, v);
    },
  },

  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
#radio {
  font-size: 16px;
  padding: 24px 24px 8px 24px;
  background-color: #fff;
  margin-bottom: 16px;

  .act {
    color: #266fff;

    .letter {
      border-color: #266fff !important;
      color: #fff !important;
      background-color: #266fff !important;
    }
  }

  .title {
    width: 830px;
    overflow: hidden;

    // white-space: wrap;
    word-wrap: break-word;

    font-size: 18px;
    line-height: 1.7;
    color: #202020;
    margin: 16px 0;
  }

  .opt-item {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: row;
    font-size: 16px;
    margin-bottom: 16px;
    line-height: 28px;
    cursor: pointer;

    .letter {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: row;
      margin-right: 20px;
      border: 1px solid #ddd;
    }
  }

  .answer {
    background-color: #f9f9f9;
    padding: 22px 24px;
    display: flex;
    justify-content: space-between;
    align-items: unset;
    flex-direction: row;

    .info {
      width: calc(100% - 34px);
      font-size: 16px;
      line-height: 28px;
      color: #333;

      p {
        width: 160px;
        float: left;
        text-align: center;
      }
    }
  }
}
</style>
